<script setup lang="ts">
import { ref, reactive, shallowRef ,onUnmounted} from "vue";
import _ from 'lodash'
import * as echarts from 'echarts';
import { queryChartStatisticsApiPost } from "@/api/allProduct"
import dayjs from "dayjs";
const chartDom = shallowRef()
const myChart = ref()
defineOptions({
    name: "addConfigAd",
});
/* 
uniqueVisitors	integer($int32)
title: 今日UV

conversionNum	integer($int32)
title: 今日转化

todayUvConversionRate	number
title: 今日UV转化率

todayCancellationRate	number
title: 今日解约率

todayCancellationNum	integer($int32)
title: 今日解约数

statisticalDate	string
title: 统计日期
*/
const emit = defineEmits(["refresh"]);
const dialogBasic = ref({
    title: "统计图",
    visible: false,
    width: 1500,
    height: 550,
    showFooter: true,
    marginTop: "5vh",
});

const searchParams1 = reactive({
    productCode: null
})

//显示弹框
const show = async (type: string, row?: any) => {
    console.log(row);
    
    console.log(type, row);
    searchParams1.productCode = row.productCode

    dialogBasic.value.visible = true;
    nextTick(() => {
        initChart()
        getData1(type, row)
    })
    window.addEventListener('resize',echartsResize)
    // 根据type 来设计
};
const echartsResize=()=>{
    console.log("000");
    nextTick(()=>{
        chartDom.value.resize()
    })
}

const getData1 = async (type: string, row: any) => {
    const res = await queryChartStatisticsApiPost(searchParams1)
    console.log(dayjs(res.data[1].statisticalDate).day(), '----');
    const xAxis = res.data && res.data.map((it: any) => {
        return {
            value: dayjs(it.statisticalDate).format("MM-DD"),
            data: it
        }
    })
    const uv = res.data && res.data.map((it: any) => {
        return {
            value: it.uniqueVisitors,
            data: it
        }
    })
    const UVtoNum = res.data && res.data.map((it: any) => {
        return {
            value: it.conversionNum,
            data: it
        }
    })
    const option = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis,
            axisLabel: {
                formatter: function (value: string, index: number) {
                    // 获取对应的日期和星期
                    const arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                    const day = arr[dayjs(res.data[index].statisticalDate).day()];
                    return [
                        '{date|' + value + '}',
                        '{day|' + day + '}'
                    ].join('\n');
                },
                rich: {
                    date: {
                        color: '#000',
                        fontSize: 12
                    },
                    day: {
                        color: '#666',
                        fontSize: 14
                    }
                }

            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} '
            }
        },
        series: [
            {
                name: 'UV',
                type: 'line',
                data: uv,

            },
            {
                name: '转化',
                type: 'line',
                data: UVtoNum,
            }
        ]
    }
    option && chartDom.value.setOption(option);
}
const onClose = async () => {
    window.removeEventListener('resize',echartsResize)

    dialogBasic.value.visible = false;
};

defineExpose({
    show,
});

const onConfirm = () => {
    console.log("onConfirm");
}
/*                                                          图表数据                                                */
const initChart = () => {
    console.log(document.getElementById('chartId'));

    chartDom.value = echarts.init(document.getElementById('chartId'))

    const option = {
        title: {
            text: '统计图'
        },
        tooltip: {
            trigger: 'axis',
            show: true,
            formatter: function (params: any) {
                const { axisValue, seriesName, data: { data } } = params[0]
                let content = `
	                  <div>日期 ${axisValue}</div>
	              `


                content += `
	                  <div style="width:300px;margin-top:20px;">
                      
                    
                      <div>今日UV : ${data.uniqueVisitors}  </div>
                      <div>今日转化 : ${data.conversionNum}  </div>
                      <div>今日UV转化率 : ${data.todayUvConversionRate}  </div>
                      <div>今日解约率 : ${data.todayCancellationRate}  </div>
                      <div>今日解约数 : ${data.todayCancellationNum}  </div>
                      </div>
                     
	                `
                return content

            }
        },
        legend: {},
        toolbox: {

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} '
            }
        },
        series: [
            {
                name: 'UV',
                type: 'line',
                data: [],
                itemStyle: { normal: { label: { show: true } } },
                showAllSymbol: true

            },
            {
                name: '转化',
                type: 'line',
                data: [],
                itemStyle: { normal: { label: { show: true } } },
                showAllSymbol: true
            }
        ]
    };
    option && chartDom.value.setOption(option);
}

</script>

<template>

    <SysDialogSlot :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :draggable="true"
        :margin-top="dialogBasic.marginTop" @on-close="onClose" destroy-on-close @on-confirm="onConfirm">
        <template v-slot:content>
            <div class="chart" ref="chartDom" id="chartId">

            </div>
        </template>
        <template v-slot:myFooter>
            <div class="dialog-footer">

            </div>
        </template>

    </SysDialogSlot>
</template>

<style lang="scss" scoped>
.chart {
    height: 600px;

}
</style>
